<template>
	<div class="foot">
		<div class="Foot-top">
			<span class="iconfont fire">&#xe62a;</span>
			<label>票价是指通过景区创空售卖的纸质门票上标注的价格</label>
		</div>
		<div class="foot-main">
			<div class="header-foot">
				<div class="foot-item ">
					<span class="iconfont">&#xe63b;</span>
					<label>机票</label>
				</div>
				<div class="foot-item ">
					<span class="iconfont">&#xe61b;</span>
					<label>酒店</label>
				</div>
				<div class="foot-item ">
					<span class="iconfont">&#xe662;</span>
					<label>公寓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</label>
				</div>
		
				<div class="foot-item ">
					<span class="iconfont"></span>
					<label>更多</label>
				</div>
			</div>
		</div>
		<div class="foot-two">
			<label>登录</label>
			<label>我的订单</label>
			<label>最近浏览</label>
			<label>关于我们</label>
		</div>
		<div class="font-bottom">Qunar 京ICP备05021087</div>
	</div>
</template>

<script>

</script>

<style scoped>
	.foot{
		background-color: #CCCCCC;
	}
	.Foot-top {
		margin: 0;
		background-color: white;
		padding: 0.2rem 0;
		padding-left: 0.2rem;
		font-size: 0.28rem;
	}

	.header-foot {
		display: flex;
		width: 100%;
		position: relative;
		color: gray;
	}

	.foot-item {
		flex: 1;
		/* 在没有明确宽度的前提下,要求该选择器的宽度占领剩余的区域部分;多个标签使用该选择器表示平均分配宽度 */
		font-size: 0.28rem;
		text-align: center;
		line-height: 1rem;
	}

	.iconfont {
		margin-right: 0.1rem;
	}

	.foot-two {
		border-bottom: 0.5PX solid lightgray;
		padding-bottom: 0.2REM;
		display: flex;
		justify-content: space-around;
		font-size: 0.32rem;
		text-align: center;
		color: royalblue;
	}

	.font-bottom {
		margin: 0.3rem 0;
		text-align: center;
		font-size: 0.32rem;
		color: gray;

	}
</style>
